<template>
  <div class="app-container">
    <div class="serach-container">
      <div class="search-inputs">
        <el-form :inline="true" :model="simpleForm" class="demo-form-inline searchCondition" label-position="right" label-width="100px">
          <el-form-item label="规则名称">
            <el-input v-model="simpleForm.ruleName" placeholder="请输入规则名称" />
          </el-form-item>
          <el-form-item label="车辆状态">
            <el-select v-model="simpleForm.vehicleLastStatus" clearable placeholder="请选择车辆状态">
              <el-option v-for="(value, key) in vehicleLastStatusMap" :key="key" :value="key" :label="value" />
            </el-select>
          </el-form-item>
          <el-form-item label="车系">
            <el-select v-model="simpleForm.seriesName" filterable clearable placeholder="请选择车系" @change="simpleForm.modelName = '', $forceUpdate()">
              <el-option v-for="item in vehicleOptions" :key="item.seriesName" :label="item.seriesName" :value="item.seriesName" />
            </el-select>
          </el-form-item>
          <el-form-item label="车型">
            <el-select v-model="simpleForm.modelName" filterable clearable placeholder="请选择车型" @change="$forceUpdate()">
              <el-option v-for="item in modelOptios" :key="item.modelName" :label="item.modelName" :value="item.modelName" />
            </el-select>
          </el-form-item>
          <el-button type="primary" @click="queryTableList">查询</el-button>
          <el-button @click="handelRest">重置</el-button>
        </el-form>
      </div>
    </div>
    <div class="section-container">
      <el-table v-loading="listLoading" size="mini" :data="tables.data" border fit highlight-current-row style="width: 100%" height="600">
        <el-table-column type="index" label="序号" width="50" align="center" />
        <el-table-column v-for="item in tables.columns" :key="item.key" align="center" :label="item.lable" header-align="center">
          <template slot-scope="{row}">
            <div v-if="item.key === 'switchStatus'">
              <el-switch v-model="row.switchStatus" :active-value="1" :inactive-value="0" @change="switchStatus(row)" />
            </div>
            <span v-else-if="item.key === 'vehicleLastStatus'">
              {{ row[item.key] | vehicleLastStatusFilter }}
            </span>
            <span v-else>{{ row[item.key] }}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="操作" width="160" fixed="right">
          <template slot-scope="{row}">
            <el-button
              type="text"
              size="small"
              @click="handelEdit(row)"
            >
              修改
            </el-button>
            <el-button
              type="text"
              size="small"
              @click="handelDelete(row)"
            >
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <pagination :total="total" :page.sync="pages.pageNum" :limit.sync="pages.pageSize" @pagination="changePages" />
    </div>
  </div>
</template>
<script>
import { customRuleList, deleteCustomRule, editCustomRule } from '@/api/crossRegionalMonitoring'
import Pagination from '@/components/Pagination'
import { vehicleLastStatusMap, unique_arr_by_key } from '@/utils/public'
export default {
  name: 'InlineEditTable',
  components: { Pagination },
  filters: {
    // 报警类型
    vehicleLastStatusFilter(status) {
      return vehicleLastStatusMap[status]
    }
  },
  data() {
    return {
      vehicleLastStatusMap,
      tables: {
        columns: [
          { lable: '规则名称', key: 'ruleName', width: '180px', align: 'center' },
          { lable: '车辆状态', key: 'vehicleLastStatus', width: '180px', align: 'center' },
          { lable: '车系', key: 'seriesName', width: '180px', align: 'center' },
          { lable: '车型', key: 'modelName', width: '180px', align: 'center' },
          // { lable: '规则说明', key: 'author', width: '180px', align: 'center' },
          { lable: '创建时间', key: 'createTime', width: '180px', align: 'center' },
          { lable: '创建人', key: 'createBy', width: '180px', align: 'center' },
          { lable: '状态', key: 'switchStatus', width: '180px', align: 'center' }
        ],
        data: []
      },
      pages: {
        pageNum: 1,
        pageSize: 20
      },
      total: 0,
      listLoading: true,
      simpleForm: {},
      isMore: false,
      // 车系车型数据集
      vehicleOptions: this.$store.state.dictionary.vehicleMap
    }
  },
  computed: {
    // 车型下拉选项，跟随车系而变化
    modelOptios() {
      if (this.vehicleOptions && this.vehicleOptions.length) {
        const { seriesName } = this.simpleForm
        const allModel = this.vehicleOptions.reduce((newArr, current) => {
          return unique_arr_by_key('modelName', newArr.concat(current.modelNameList))
        }, [])
        const currentModelList = this.vehicleOptions.filter(item => item.seriesName === seriesName)
        if (currentModelList.length) return currentModelList[0].modelNameList
        return allModel
      } else {
        return []
      }
    }
  },
  created() {
    this.queryTableList()
  },
  methods: {
    changePages(params) {
      this.pages = { ...params }
      this.queryTableList()
    },
    async queryTableList() {
      const params = { ...this.simpleForm, ...this.pages }
      console.log(params)
      this.listLoading = true
      const { data } = await customRuleList(params)
      const items = data.data
      this.tables.data = items.list
      this.total = items.total
      this.listLoading = false
    },
    // 清空查询条件
    handelRest() {
      for (const key in this.simpleForm) {
        this.simpleForm[key] = ''
      }
    },
    handelToggle() {
      this.isMore = !this.isMore
      !this.isMore && this.handelRest()
    },
    handelEdit(row) {
      console.log(row)
      this.$emit('edit', row)
    },
    handelDelete(row) {
      console.log(row)
      this.$confirm('此操作将删除该规则，您确认要继续吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        deleteCustomRule(row.id).then(res => {
          const { data } = res
          console.log(data)
          this.queryTableList()
        })
      }).catch(() => {
        this.sendWarning = false
        this.$message({
          type: 'info',
          message: '已取消'
        })
      })
    },
    switchStatus(row) {
      const { switchStatus, id } = row
      editCustomRule({ switchStatus, id }).then(res => {
        const { data } = res
        // this.queryTableList()
        console.log(data)
      })
    }
  }
}
</script>
<style lang="scss" scoped>
::v-deep .el-form-item .el-form-item__content{
            width: 200px;
          }
</style>
